<{extend name="Public:public0" /}>

<{block name="title"}>axios<{/block}>

<{block name="sidebar"}><{include file="Public:sidebar-vuecli" /}><{/block}>

<{block name="head"}>
<style type="text/css">
	.content pre {
		font-size: 1em;
	}
	h4 {
		font-size: 1.2em;
	}
	h5 {
		font-size: 1.1em !important;
	}
	h6 {
		font-size: 1em;
	}
</style>
<{/block}>

<{block name="content"}> 
<div class="content guide with-sidebar components-guide">
	

<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>

<h2 id="Features">
	<a href="#Features" class="line headerlink" title="Features" data-scroll="">Features</a>
</h2>

<ul><li>从浏览器中创建 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" target="_blank">XMLHttpRequests</a></li><li>从 node.js 创建 <a href="http://nodejs.org/api/http.html" target="_blank">http</a> 请求</li><li>支持 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">Promise</a> API</li><li>拦截请求和响应</li><li>转换请求数据和响应数据</li><li>取消请求</li><li>自动转换 JSON 数据</li><li>客户端支持防御 <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery" target="_blank">XSRF</a></li></ul>

<h2 id="浏览器支持">
	<a href="#浏览器支持" class="line headerlink" title="浏览器支持" data-scroll="">浏览器支持</a>
</h2>
<p><a href="javascipt:void(0)" target="_blank"><img alt="Browser Matrix" src="../../images/axios.svg"></a></p>

<h2 id="安装">
	<a href="#安装" class="line headerlink" title="安装" data-scroll="">安装</a>
</h2>
<p>使用 npm:</p>
<pre>$ npm install axios --save
</pre>
<p>使用 bower:</p>
<pre>$ bower install axios
</pre>
<p>使用 cdn:</p>
<pre><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/axios/dist/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</pre>

<h2 id="Example">
	<a href="#Example" class="line headerlink" title="Example" data-scroll="">Example</a>
</h2>
<blockquote>
	<p>van: vue常用实例</p>
</blockquote>
<code class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln">&nbsp;axios&nbsp;</span><span class="kwd">from</span><span class="pln">&nbsp;</span><span class="str">'axios'</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="pln">methods</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;getDetailInfo</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;方法1&nbsp;-&nbsp;动态路由</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;axios</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'/api/detail.json?id='</span><span class="pln">&nbsp;</span><span class="pun">+</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">$route</span><span class="pun">.</span><span class="kwd">params</span><span class="pun">.</span><span class="pln">id</span><span class="pun">)</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;方法2&nbsp;-&nbsp;动态路由</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;axios</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'/api/detail.json'</span><span class="pun">,</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">params</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id</span><span class="pun">:</span><span class="pln">&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">$route</span><span class="pun">.</span><span class="kwd">params</span><span class="pun">.</span><span class="pln">id</span></li><li class="L0"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}).</span><span class="kwd">then</span><span class="pun">(</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">res</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">=&gt;</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;res</span><span class="pun">.</span><span class="pln">data</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">if</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">res</span><span class="pun">.</span><span class="pln">ret&nbsp;</span><span class="pun">&amp;&amp;</span><span class="pln">&nbsp;res</span><span class="pun">.</span><span class="pln">data</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">const</span><span class="pln">&nbsp;data&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;res</span><span class="pun">.</span><span class="pln">data</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">sightName&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">sightName</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">bannerImg&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">bannerImg</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">gallaryImgs&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">gallaryImgs</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">list&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">categoryList</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L0"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">})</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;</span><span class="pun">},</span></li><li class="L2"><span class="pln">&nbsp;&nbsp;handleGetDataSucc</span><span class="pun">(</span><span class="pln">res</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L3"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;res&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;res</span><span class="pun">.</span><span class="pln">data&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;axios:&nbsp;返回有data;&nbsp;status:&nbsp;200;&nbsp;statusText:'OK'</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">if</span><span class="pln">&nbsp;</span><span class="pun">(</span><span class="pln">res</span><span class="pun">)</span><span class="pln">&nbsp;</span><span class="pun">{</span></li><li class="L5"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">const</span><span class="pln">&nbsp;data&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;res</span><span class="pun">.</span><span class="pln">data</span></li><li class="L6"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">sightName&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">sightName</span></li><li class="L7"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">bannerImg&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">bannerImg</span></li><li class="L8"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">gallaryImgs&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">gallaryImgs</span></li><li class="L9"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">list&nbsp;</span><span class="pun">=</span><span class="pln">&nbsp;data</span><span class="pun">.</span><span class="pln">categoryList</span></li><li class="L0"><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L1"><span class="pln">&nbsp;&nbsp;</span><span class="pun">}</span></li><li class="L2"><span class="pun">},</span></li><li class="L3"><span class="pln">mounted</span><span class="pun">()</span><span class="pln">&nbsp;</span><span class="pun">{</span><span class="pln">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="com">//&nbsp;此时获取axios数据</span></li><li class="L4"><span class="pln">&nbsp;&nbsp;</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">getDetailInfo</span><span class="pun">()</span></li><li class="L5"><span class="pun">}</span></li></ol></code>



<br><br>


<p>执行 <code>GET</code> 请求</p>
<pre><span class="hljs-comment">// 为给定 ID 的 user 创建请求</span>
axios.get(<span class="hljs-string">'/user?ID=12345'</span>)
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });

<span class="hljs-comment">// 可选地，上面的请求可以这样做</span>
axios.get(<span class="hljs-string">'/user'</span>, {
    <span class="hljs-attr">params</span>: {
      <span class="hljs-attr">ID</span>: <span class="hljs-number">12345</span>
    }
  })
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });
</pre>
<p>执行 <code>POST</code> 请求</p>
<pre>axios.post(<span class="hljs-string">'/user'</span>, {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>,
    <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Flintstone'</span>
  })
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response);
  })
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-built_in">console</span>.log(error);
  });
</pre>
<p>执行多个并发请求</p>
<pre><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserAccount</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> axios.get(<span class="hljs-string">'/user/12345'</span>);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserPermissions</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> axios.get(<span class="hljs-string">'/user/12345/permissions'</span>);
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">acct, perms</span>) </span>{
    <span class="hljs-comment">// 两个请求现在都执行完成</span>
  }));
</pre>

<h2 id="API">
	<a href="#API" class="line headerlink" title="API" data-scroll="">axios API</a>
</h2>
<p>可以通过向 <code>axios</code> 传递相关配置来创建请求</p>
<h5 data-line="113" class="line"><a id="axiosconfig_113"></a>axios(config)</h5>
<pre><span class="hljs-comment">// 发送 POST 请求</span>
axios({
  <span class="hljs-attr">method</span>: <span class="hljs-string">'post'</span>,
  <span class="hljs-attr">url</span>: <span class="hljs-string">'/user/12345'</span>,
  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>,
    <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Flintstone'</span>
  }
});
</pre>
<h5 data-line="127" class="line"><a id="axiosurl_config_127"></a>axios(url[, config])</h5>
<pre><span class="hljs-comment">// 发送 GET 请求（默认的方法）</span>
axios(<span class="hljs-string">'/user/12345'</span>);
</pre>

<h3 id="请求方法的别名">
	<a href="#请求方法的别名" class="headerlink" title="请求方法的别名" data-scroll="">请求方法的别名</a>
</h3>
<p>为方便起见，为所有支持的请求方法提供了别名</p>
<h5 data-line="138" class="line"><a id="axiosrequestconfig_138"></a>axios.request(config)</h5>
<h5 data-line="139" class="line"><a id="axiosgeturl_config_139"></a>axios.get(url[, config])</h5>
<h5 data-line="140" class="line"><a id="axiosdeleteurl_config_140"></a>axios.delete(url[, config])</h5>
<h5 data-line="141" class="line"><a id="axiosheadurl_config_141"></a>axios.head(url[, config])</h5>
<h5 data-line="142" class="line"><a id="axiosposturl_data_config_142"></a>axios.post(url[, data[, config]])</h5>
<h5 data-line="143" class="line"><a id="axiosputurl_data_config_143"></a>axios.put(url[, data[, config]])</h5>
<h5 data-line="144" class="line"><a id="axiospatchurl_data_config_144"></a>axios.patch(url[, data[, config]])</h5>
<h6 data-line="146" class="line"><a id="NOTE_146"></a>NOTE</h6>
<p>在使用别名方法时， <code>url</code>、<code>method</code>、<code>data</code> 这些属性都不必在配置中指定。</p>

<h3 id="并发">
	<a href="#并发" class="headerlink" title="并发" data-scroll="">并发</a>
</h3>
<p>处理并发请求的助手函数</p>
<h5 data-line="153" class="line"><a id="axiosalliterable_153"></a>axios.all(iterable)</h5>
<h5 data-line="154" class="line"><a id="axiosspreadcallback_154"></a>axios.spread(callback)</h5>

<h3 id="创建实例">
	<a href="#创建实例" class="headerlink" title="创建实例" data-scroll="">创建实例</a>
</h3>
<p>可以使用自定义配置新建一个 axios 实例</p>
<h5 data-line="160" class="line"><a id="axioscreateconfig_160"></a>axios.create([config])</h5>
<pre><span class="hljs-keyword">var</span> instance = axios.create({
  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">'https://some-domain.com/api/'</span>,
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">1000</span>,
  <span class="hljs-attr">headers</span>: {<span class="hljs-string">'X-Custom-Header'</span>: <span class="hljs-string">'foobar'</span>}
});
</pre>

<h3 id="实例方法">
	<a href="#实例方法" class="headerlink" title="实例方法" data-scroll="">实例方法</a>
</h3>
<p>以下是可用的实例方法。指定的配置将与实例的配置合并</p>
<h5 data-line="174" class="line"><a id="axiosrequestconfig_174"></a>axios#request(config)</h5>
<h5 data-line="175" class="line"><a id="axiosgeturl_config_175"></a>axios#get(url[, config])</h5>
<h5 data-line="176" class="line"><a id="axiosdeleteurl_config_176"></a>axios#delete(url[, config])</h5>
<h5 data-line="177" class="line"><a id="axiosheadurl_config_177"></a>axios#head(url[, config])</h5>
<h5 data-line="178" class="line"><a id="axiosposturl_data_config_178"></a>axios#post(url[, data[, config]])</h5>
<h5 data-line="179" class="line"><a id="axiosputurl_data_config_179"></a>axios#put(url[, data[, config]])</h5>
<h5 data-line="180" class="line"><a id="axiospatchurl_data_config_180"></a>axios#patch(url[, data[, config]])</h5>


<h2 id="请求配置">
	<a href="#请求配置" class="line headerlink" title="请求配置" data-scroll="">请求配置</a>
</h2>
<p>这些是创建请求时可以用的配置选项。只有 <code>url</code> 是必需的。如果没有指定 <code>method</code>，请求将默认使用 <code>get</code> 方法。</p>
<pre>{
  <span class="hljs-comment">// `url` 是用于请求的服务器 URL</span>
  url: <span class="hljs-string">'/user'</span>,

  <span class="hljs-comment">// `method` 是创建请求时使用的方法</span>
  method: <span class="hljs-string">'get'</span>, <span class="hljs-comment">// 默认是 get</span>

  <span class="hljs-comment">// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。</span>
  <span class="hljs-comment">// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL</span>
  baseURL: <span class="hljs-string">'https://some-domain.com/api/'</span>,

  <span class="hljs-comment">// `transformRequest` 允许在向服务器发送前，修改请求数据</span>
  <span class="hljs-comment">// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法</span>
  <span class="hljs-comment">// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream</span>
  transformRequest: [<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
    <span class="hljs-comment">// 对 data 进行任意转换处理</span>

    <span class="hljs-keyword">return</span> data;
  }],

  <span class="hljs-comment">// `transformResponse` 在传递给 then/catch 前，允许修改响应数据</span>
  transformResponse: [<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">data</span>) </span>{
    <span class="hljs-comment">// 对 data 进行任意转换处理</span>

    <span class="hljs-keyword">return</span> data;
  }],

  <span class="hljs-comment">// `headers` 是即将被发送的自定义请求头</span>
  headers: {<span class="hljs-string">'X-Requested-With'</span>: <span class="hljs-string">'XMLHttpRequest'</span>},

  <span class="hljs-comment">// `params` 是即将与请求一起发送的 URL 参数</span>
  <span class="hljs-comment">// 必须是一个无格式对象(plain object)或 URLSearchParams 对象</span>
  params: {
    <span class="hljs-attr">ID</span>: <span class="hljs-number">12345</span>
  },

  <span class="hljs-comment">// `paramsSerializer` 是一个负责 `params` 序列化的函数</span>
  <span class="hljs-comment">// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)</span>
  paramsSerializer: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">params</span>) </span>{
    <span class="hljs-keyword">return</span> Qs.stringify(params, {<span class="hljs-attr">arrayFormat</span>: <span class="hljs-string">'brackets'</span>})
  },

  <span class="hljs-comment">// `data` 是作为请求主体被发送的数据</span>
  <span class="hljs-comment">// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'</span>
  <span class="hljs-comment">// 在没有设置 `transformRequest` 时，必须是以下类型之一：</span>
  <span class="hljs-comment">// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams</span>
  <span class="hljs-comment">// - 浏览器专属：FormData, File, Blob</span>
  <span class="hljs-comment">// - Node 专属： Stream</span>
  data: {
    <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Fred'</span>
  },

  <span class="hljs-comment">// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)</span>
  <span class="hljs-comment">// 如果请求话费了超过 `timeout` 的时间，请求将被中断</span>
  timeout: <span class="hljs-number">1000</span>,

  <span class="hljs-comment">// `withCredentials` 表示跨域请求时是否需要使用凭证</span>
  withCredentials: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `adapter` 允许自定义处理请求，以使测试更轻松</span>
  <span class="hljs-comment">// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).</span>
  adapter: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) </span>{
    <span class="hljs-comment">/* ... */</span>
  },

  <span class="hljs-comment">// `auth` 表示应该使用 HTTP 基础验证，并提供凭据</span>
  <span class="hljs-comment">// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头</span>
  auth: {
    <span class="hljs-attr">username</span>: <span class="hljs-string">'janedoe'</span>,
    <span class="hljs-attr">password</span>: <span class="hljs-string">'s00pers3cret'</span>
  },

  <span class="hljs-comment">// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'</span>
  responseType: <span class="hljs-string">'json'</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称</span>
  xsrfCookieName: <span class="hljs-string">'XSRF-TOKEN'</span>, <span class="hljs-comment">// default</span>

  <span class="hljs-comment">// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称</span>
  xsrfHeaderName: <span class="hljs-string">'X-XSRF-TOKEN'</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `onUploadProgress` 允许为上传处理进度事件</span>
  onUploadProgress: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">progressEvent</span>) </span>{
    <span class="hljs-comment">// 对原生进度事件的处理</span>
  },

  <span class="hljs-comment">// `onDownloadProgress` 允许为下载处理进度事件</span>
  onDownloadProgress: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">progressEvent</span>) </span>{
    <span class="hljs-comment">// 对原生进度事件的处理</span>
  },

  <span class="hljs-comment">// `maxContentLength` 定义允许的响应内容的最大尺寸</span>
  maxContentLength: <span class="hljs-number">2000</span>,

  <span class="hljs-comment">// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte</span>
  validateStatus: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">status</span>) </span>{
    <span class="hljs-keyword">return</span> status &gt;= <span class="hljs-number">200</span> &amp;&amp; status &lt; <span class="hljs-number">300</span>; <span class="hljs-comment">// 默认的</span>
  },

  <span class="hljs-comment">// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目</span>
  <span class="hljs-comment">// 如果设置为0，将不会 follow 任何重定向</span>
  maxRedirects: <span class="hljs-number">5</span>, <span class="hljs-comment">// 默认的</span>

  <span class="hljs-comment">// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：</span>
  <span class="hljs-comment">// `keepAlive` 默认没有启用</span>
  httpAgent: <span class="hljs-keyword">new</span> http.Agent({ <span class="hljs-attr">keepAlive</span>: <span class="hljs-literal">true</span> }),
  <span class="hljs-attr">httpsAgent</span>: <span class="hljs-keyword">new</span> https.Agent({ <span class="hljs-attr">keepAlive</span>: <span class="hljs-literal">true</span> }),

  <span class="hljs-comment">// 'proxy' 定义代理服务器的主机名称和端口</span>
  <span class="hljs-comment">// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据</span>
  <span class="hljs-comment">// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。</span>
  proxy: {
    <span class="hljs-attr">host</span>: <span class="hljs-string">'127.0.0.1'</span>,
    <span class="hljs-attr">port</span>: <span class="hljs-number">9000</span>,
    <span class="hljs-attr">auth</span>: : {
      <span class="hljs-attr">username</span>: <span class="hljs-string">'mikeymike'</span>,
      <span class="hljs-attr">password</span>: <span class="hljs-string">'rapunz3l'</span>
    }
  },

  <span class="hljs-comment">// `cancelToken` 指定用于取消请求的 cancel token</span>
  <span class="hljs-comment">// （查看后面的 Cancellation 这节了解更多）</span>
  cancelToken: <span class="hljs-keyword">new</span> CancelToken(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">cancel</span>) </span>{
  })
}
</pre>

<h2 id="响应结构">
	<a href="#响应结构" class="line headerlink" title="响应结构" data-scroll="">响应结构</a>
</h2>

<p>某个请求的响应包含以下信息</p>
<pre>{
  <span class="hljs-comment">// `data` 由服务器提供的响应</span>
  data: {},

  <span class="hljs-comment">// `status` 来自服务器响应的 HTTP 状态码</span>
  status: <span class="hljs-number">200</span>,

  <span class="hljs-comment">// `statusText` 来自服务器响应的 HTTP 状态信息</span>
  statusText: <span class="hljs-string">'OK'</span>,

  <span class="hljs-comment">// `headers` 服务器响应的头</span>
  headers: {},

  <span class="hljs-comment">// `config` 是为请求提供的配置信息</span>
  config: {}
}
</pre>
<p>使用 <code>then</code> 时，你将接收下面这样的响应：</p>
<pre>axios.get(<span class="hljs-string">'/user/12345'</span>)
  .then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">response</span>) </span>{
    <span class="hljs-built_in">console</span>.log(response.data);
    <span class="hljs-built_in">console</span>.log(response.status);
    <span class="hljs-built_in">console</span>.log(response.statusText);
    <span class="hljs-built_in">console</span>.log(response.headers);
    <span class="hljs-built_in">console</span>.log(response.config);
  });
</pre>
<p>在使用 <code>catch</code> 时，或传递 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then" target="_blank">rejection callback</a> 作为 <code>then</code> 的第二个参数时，响应可以通过 <code>error</code> 对象可被使用，正如在<a href="#handling-errors">错误处理</a>这一节所讲。</p>


<h2 id="defaults">
	<a href="#defaults" class="line headerlink" title="defaults" data-scroll="">defaults</a>
</h2>
<p>你可以指定将被用在各个请求的配置默认值</p>
<h3 data-line="356" class="line"><a id="_axios__356"></a>全局的 axios 默认值</h3>
<pre>axios.defaults.baseURL = <span class="hljs-string">'https://api.example.com'</span>;
axios.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = AUTH_TOKEN;
axios.defaults.headers.post[<span class="hljs-string">'Content-Type'</span>] = <span class="hljs-string">'application/x-www-form-urlencoded'</span>;
</pre>
<h3 data-line="364" class="line"><a id="_364"></a>自定义实例默认值</h3>
<pre><span class="hljs-comment">// 创建实例时设置配置的默认值</span>
<span class="hljs-keyword">var</span> instance = axios.create({
  <span class="hljs-attr">baseURL</span>: <span class="hljs-string">'https://api.example.com'</span>
});

<span class="hljs-comment">// 在实例已创建后修改默认值</span>
instance.defaults.headers.common[<span class="hljs-string">'Authorization'</span>] = AUTH_TOKEN;
</pre>
<h3 data-line="376" class="line"><a id="_376"></a>配置的优先顺序</h3>
<p>配置会以一个优先顺序进行合并。这个顺序是：在 <code>lib/defaults.js</code> 找到的库的默认值，然后是实例的 <code>defaults</code> 属性，最后是请求的 <code>config</code> 参数。后者将优先于前者。这里是一个例子：</p>
<pre><span class="hljs-comment">// 使用由库提供的配置的默认值来创建实例</span>
<span class="hljs-comment">// 此时超时配置的默认值是 `0`</span>
<span class="hljs-keyword">var</span> instance = axios.create();

<span class="hljs-comment">// 覆写库的超时默认值</span>
<span class="hljs-comment">// 现在，在超时前，所有请求都会等待 2.5 秒</span>
instance.defaults.timeout = <span class="hljs-number">2500</span>;

<span class="hljs-comment">// 为已知需要花费很长时间的请求覆写超时设置</span>
instance.get(<span class="hljs-string">'/longRequest'</span>, {
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});
</pre>


<h2 id="拦截器">
	<a href="#拦截器" class="line headerlink" title="拦截器" data-scroll="">拦截器</a>
</h2>
<p>在请求或响应被 <code>then</code> 或 <code>catch</code> 处理前拦截它们。</p>
<pre><span class="hljs-comment">// 添加请求拦截器</span>
axios.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">config</span>) </span>{
    <span class="hljs-comment">// 在发送请求之前做些什么</span>
    <span class="hljs-keyword">return</span> config;
  }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-comment">// 对请求错误做些什么</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
  });

<span class="hljs-comment">// 添加响应拦截器</span>
axios.interceptors.response.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) </span>{
    <span class="hljs-comment">// 对响应数据做点什么</span>
    <span class="hljs-keyword">return</span> response;
  }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-comment">// 对响应错误做点什么</span>
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Promise</span>.reject(error);
  });
</pre>
<p>如果你想在稍后移除拦截器，可以这样：</p>
<pre><span class="hljs-keyword">var</span> myInterceptor = axios.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<span class="hljs-comment">/*...*/</span>});
axios.interceptors.request.eject(myInterceptor);
</pre>
<p>可以为自定义 axios 实例添加拦截器</p>
<pre><span class="hljs-keyword">var</span> instance = axios.create();
instance.interceptors.request.use(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<span class="hljs-comment">/*...*/</span>});
</pre>


<h2 id="错误处理">
	<a href="#错误处理" class="line headerlink" title="错误处理" data-scroll="">错误处理</a>
</h2>
<pre>axios.get(<span class="hljs-string">'/user/12345'</span>)
  .catch(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>{
    <span class="hljs-keyword">if</span> (error.response) {
      <span class="hljs-comment">// 请求已发出，但服务器响应的状态码不在 2xx 范围内</span>
      <span class="hljs-built_in">console</span>.log(error.response.data);
      <span class="hljs-built_in">console</span>.log(error.response.status);
      <span class="hljs-built_in">console</span>.log(error.response.headers);
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-comment">// Something happened in setting up the request that triggered an Error</span>
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Error'</span>, error.message);
    }
    <span class="hljs-built_in">console</span>.log(error.config);
  });
</pre>
<p>可以使用 <code>validateStatus</code> 配置选项定义一个自定义 HTTP 状态码的错误范围。</p>
<pre>axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">validateStatus</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">status</span>) </span>{
    <span class="hljs-keyword">return</span> status &lt; <span class="hljs-number">500</span>; <span class="hljs-comment">// 状态码在大于或等于500时才会 reject</span>
  }
})
</pre>

<h2 id="取消">
	<a href="#取消" class="line headerlink" title="取消" data-scroll="">取消</a>
</h2>
<p>使用 <em>cancel token</em> 取消请求</p>
<blockquote class="default"><p>Axios 的 cancel token API 基于<a href="https://github.com/tc39/proposal-cancelable-promises" target="_blank">cancelable promises proposal</a>，它还处于第一阶段。</p></blockquote>
<p>可以使用 <code>CancelToken.source</code> 工厂方法创建 cancel token，像这样：</p>
<pre><span class="hljs-keyword">var</span> CancelToken = axios.CancelToken;
<span class="hljs-keyword">var</span> source = CancelToken.source();

axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">cancelToken</span>: source.token
}).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">thrown</span>) </span>{
  <span class="hljs-keyword">if</span> (axios.isCancel(thrown)) {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Request canceled'</span>, thrown.message);
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// 处理错误</span>
  }
});

<span class="hljs-comment">// 取消请求（message 参数是可选的）</span>
source.cancel(<span class="hljs-string">'Operation canceled by the user.'</span>);
</pre>
<p>还可以通过传递一个 executor 函数到 <code>CancelToken</code> 的构造函数来创建 cancel token：</p>
<pre><span class="hljs-keyword">var</span> CancelToken = axios.CancelToken;
<span class="hljs-keyword">var</span> cancel;

axios.get(<span class="hljs-string">'/user/12345'</span>, {
  <span class="hljs-attr">cancelToken</span>: <span class="hljs-keyword">new</span> CancelToken(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">executor</span>(<span class="hljs-params">c</span>) </span>{
    <span class="hljs-comment">// executor 函数接收一个 cancel 函数作为参数</span>
    cancel = c;
  })
});

<span class="hljs-comment">// 取消请求</span>
cancel();
</pre>
<p>Note : 可以使用同一个 cancel token 取消多个请求</p>


<h2 id="Semver">
	<a href="#Semver" class="line headerlink" title="Semver" data-scroll="">Semver</a>
</h2>
<p>Until axios reaches a <code>1.0</code> release, breaking changes will be released with a new minor version. For example <code>0.5.1</code>, and <code>0.5.4</code> will have the same API, but <code>0.6.0</code> will have breaking changes.</p>

<h2 id="Promises">
	<a href="#Promises" class="line headerlink" title="Promises" data-scroll="">Promises</a>
</h2>
<p>axios 依赖原生的 ES6 Promise 实现而<a href="http://caniuse.com/promises" target="_blank">被支持</a>.<br>
如果你的环境不支持 ES6 Promise，你可以使用 <a href="https://github.com/jakearchibald/es6-promise" target="_blank">polyfill</a>.</p>

<h2 id="TypeScript">
	<a href="#TypeScript" class="line headerlink" title="TypeScript" data-scroll="">TypeScript</a>
</h2>
<p>axios includes <a href="http://typescriptlang.org" target="_blank">TypeScript</a> definitions.</p>
<pre><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;
axios.get(<span class="hljs-string">'/user?ID=12345'</span>);
</pre>

<h2 id="Resources">
	<a href="#Resources" class="line headerlink" title="Resources" data-scroll="">Resources</a>
</h2>
<ul><li><a href="https://github.com/mzabriskie/axios/blob/master/CHANGELOG.md" target="_blank">Changelog</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/UPGRADE_GUIDE.md" target="_blank">Upgrade Guide</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/ECOSYSTEM.md" target="_blank">Ecosystem</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/CONTRIBUTING.md" target="_blank">Contributing Guide</a></li><li><a href="https://github.com/mzabriskie/axios/blob/master/CODE_OF_CONDUCT.md" target="_blank">Code of Conduct</a></li></ul>

<h2 id="Credits">
	<a href="#Credits" class="line headerlink" title="Credits" data-scroll="">Credits</a>
</h2>
<p>axios is heavily inspired by the <a href="https://docs.angularjs.org/api/ng/service/$http" target="_blank">$http service</a> provided in <a href="https://angularjs.org/" target="_blank">Angular</a>. Ultimately axios is an effort to provide a standalone <code>$http</code>-like service for use outside of Angular.</p>

<h2 id="License">
	<a href="#License" class="line headerlink" title="License" data-scroll="">License</a>
</h2>
<p>MIT</p>
 </div><div class="article-navigation"><span class="next">下一篇：<a href="234846">升级指南</a></span></div><div class="article-comment"><h3 class="ui header dividing">相关评论(1)</h3><form class="ui form"><input type="hidden" name="article_id" value="234845"><div class="field"><textarea name="content" placeholder="文明上网,理性发言" rows="4"></textarea></div><button type="submit" class="ui green submit button right floated small">发布 (Ctrl+Enter)</button></form><div class="ui comments"><div class="comment"><a class="avatar"><img src="https://avatar.kancloud.cn/d4/1d8cd98f00b204e9800998ecf8427e!middle"></a><div class="content"><a class="author">一汀烟雨</a><div class="metadata">@#260731 ·<span class="date">5 个月前</span></div><div class="text article-body"><p>拦截器错误时（token失效），能再次请求一次么（重新获得token后）?就好了啊</p>
</div><div class="actions"><a><i class="icon reply"></i>回复</a></div></div></div></div>




</div>

<{/block}>